<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pinia 模块化的开发</title>
</head>
<body>
<div id="app">
    <shop></shop>
    <br>
    <user></user>
</div>

<template id="shop">
    <div v-for="(item, key) in items" v-bind:key="key">
        <div>商品编号：{{ item.id }}</div>
        <div>商品名称：{{ item.name }}</div>
        <div>商品价格：{{ item.price }}</div>
    </div>
</template>

<template id="user">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>性别：{{ gender }}</h2>

    <button v-on:click="changeAge">修改年龄</button>
    <button v-on:click="changeGender">修改性别</button>
</template>
<script type="module">
    import {createApp, defineComponent, ref} from "../../../../js/vue.esm-browser.js";
    import {createPinia, defineStore, storeToRefs} from "../../../../js/pinia.esm-browser.js";


    let useShopStore = defineStore(
        "shop",
        {
            state: () => {
                return {
                    items: [
                        {
                            id: 1,
                            name: "Redmi 13 Pro",
                            price: 1999,
                        },
                        {
                            id: 2,
                            name: "GT 5",
                            price: 2799,
                        }
                    ]
                }
            },
            getters: {},
            actions: {},
        }
    );

    let useUserStore = defineStore(
        "user",
        () => {
            let name = ref("abcque")
            let age = ref(18)
            let gender = ref("M")

            function chageAge() {
                age.value++
            }

            function changeGender() {
                if (gender.value === "M") {
                    gender.value = "W"
                } else {
                    gender.value = "M"
                }
            }

            return {
                name, age, gender,
                chageAge, changeGender,
            }

        }
    );


    let Shop = defineComponent(
        {
            template: "#shop",
            setup() {
                let shopStore = useShopStore();
                // 为了保持对象的响应式特性
                let {items} = storeToRefs(shopStore);

                console.log(items);
                return {
                    items,
                };
            }
        }
    );


    let User = defineComponent(
        {
            template: "#user",
            setup(){
                let userStore = useUserStore();

                let {name, age, gender} = storeToRefs(userStore);

                function changeAge() {
                    userStore.chageAge()
                }

                function changeGender() {
                    userStore.changeGender()
                }
                return {
                    name, age, gender,changeGender, changeAge,
                }
            }
        }
    );
    let app = createApp(
        {
            setup() {
                return {}
            },
            components: {
                Shop,
                User,
            }
        }
    )

    // 创建 Pinia 对象，并在 Vue 中使用
    let pinia = createPinia();
    app.use(pinia)

    app.mount("#app")
</script>
</body>
</html>